<!DOCTYPE html>
<html>
    <head>
        <title>淘宝的flexible适配方案</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <!-- 假如是ie9一下，引用兼容文件 -->
        <!--[if lt IE 9]>
            <script src="html5shiv.js"></script>
            <script src="respond.min.js"></script>
        <![endif]-->
        <!-- 引入适配文件，最下面的参数忘记是什么了，大概是设计稿宽度吧, 这是我比较喜欢的一种rem了，与微信的rpx很像 -->
        <script src="flexible.js"></script>
        <style>
            .title{
                font-size: 0.40rem;
            }
            .text{
                font-size: 0.3rem;
            }
        </style>
    </head>
    <body>
        <div class="test">
            <p class="title">这里是标题</p>
            <p class="text">内容文章</p>
            <p class="text">内容文章</p>
        </div>
    </body>
</html>